<template>
  <div class="openDetail">
    <hr style="border: none">
    <hr>
    <div>
      <el-form :model="tableData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="报修类型" prop="repaireName">
          <el-input v-model="tableData.repaireName"></el-input>
        </el-form-item>
        <el-form-item label="报修地点" prop="buildingDetailName">
          <el-input v-model="tableData.buildingDetailName"></el-input>
        </el-form-item>
        <el-form-item label="报修物品" prop="goodsName">
          <el-input v-model="tableData.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNum">
          <el-input v-model="tableData.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="repaireDes">
          <el-input type="textarea" v-model="tableData.repaireDes"></el-input>
        </el-form-item>
        <el-form-item label="报修人" prop="userName">
          <el-input v-model="tableData.userName"></el-input>
        </el-form-item>
        <el-form-item label="维修人" prop="repairemanName">
          <el-input v-model="tableData.repairemanName"></el-input>
        </el-form-item>
        <el-form-item label="评论" prop="evaluate">
          <el-input type="textarea" v-model="tableData.evaluate"></el-input>
        </el-form-item>
        <el-form-item label="接单时间" prop="getRepaireTime">
          <el-input v-model="tableData.getRepaireTime"></el-input>
        </el-form-item>
        <el-form-item label="完成时间时间" prop="overTime">
          <el-input v-model="tableData.overTime"></el-input>
        </el-form-item>
        <el-button type="primary" size="small" round @click="getOrder()"
                   icon="el-icon-plus">接单
        </el-button>


        <!--<el-form-item label="活动性质" prop="type">-->
          <!--<el-checkbox-group v-model="ruleForm.type">-->
            <!--<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="地推活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
            <!--<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
          <!--</el-checkbox-group>-->
        <!--</el-form-item>-->



      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'repaireOrderDetail',
    data () {
      return {
        loading: false,
        url: {
          queryPage: '/baoxiu/repaire/getAllrepaireDetailById',
          toRepaire: '/baoxiu/repaire/toRepaire'
        },
        tableData: {
          repaireName: '',
          buildingName: '',
          buildingDetailName: '',
          goodsName: '',
          roomNum: '',
          repaireDes: '',
          repaireStatus: '',
          userName: '',
          repairemanName: '',
          evaluate: '',
          getRepaireTime: '',
          overTime: ''
        },
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            name: ''
          }
        }
      }
    },
    methods: {
      // 接单
      getOrder () {
        let id = this.$route.params.id || 0
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.toRepaire), {
            params: this.$http.adornParams({rid: id})
          })
          .then(() => {
            this.$message({
              message: '接单成功',
              type: 'success',
              duration: 1500  // 持续时间

            })
          })
      },
      // 加载列表页
      queryFormSubmit: function (rid) {
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.$http.adornParams({rid: rid})
          })
          .then(({data}) => {
            this.loading = false
            this.tableData = data
            console.log(this.tableData, 'tableData')
          })
      }
    },
    created () {
      let id = this.$route.params.id || 0
      console.log('id', id)
      console.log('11111111111111111111111111111111111111')
      this.queryFormSubmit(id)
    }
  }
</script>

<style scoped>
</style>
